<template>
    <article>
        <header>提示框</header>
        <section>
            <header>颜色</header>
            <div>
                <cv-button c="btn primary mini distant" @click="toast">信息提示框</cv-button>
                <cv-button c="btn primary mini distant" @click="toastSuccess">成功提示框</cv-button>
                <cv-button c="btn primary mini distant" @click="toastWarn">警告提示框</cv-button>
                <cv-button c="btn primary mini distant" @click="toastError">错误提示框</cv-button>
                <cv-button c="btn primary mini distant" @click="toastSlot">自定义提示框</cv-button>
            </div>
        </section>
    </article>
</template>

<script>
    export default {
        name: "ExampleToast",
        methods: {
            async toast() {
                await this.$toast("我是消息").result;
                console.info("close");
            },
            toastSuccess() {
                let component = this.$toastSuccess("我是消息啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊").component;
                console.info(component);
            },
            toastWarn() {
                this.$toastWarn("我是消息");
            },
            toastError() {
                this.$toastError("我是消息");
            },
            toastSlot() {
                this.$toast("自定义消息", "自定义");
            },
            async confirm() {
                let result = await this.$confirm("我是消息").result;
                console.info(result);
            }
        }
    }
</script>

<style scoped>
</style>
